<template>
  <div class="data-info">
    <div class="condition">
      <el-button
        type="primary"
        @click="addPermission(0)"
      >添加新权限</el-button>
    </div>
    <el-table
      :loading="loading"
      :data="data"
      :tree-props="treeProps"
      row-key="id"
    >
      <el-table-column
        label="标识"
        prop="name"
      ></el-table-column>
      <el-table-column
        label="展示名称"
        prop="display_name"
      ></el-table-column>
      <el-table-column
        label="描述"
        prop="description"
      ></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{row}">
          <table-action
            :row="row"
            @deleteItem="deleteIt"
            @editItem="editPermission"
            :deleteProps="deletePorps"
          >
            <template slot="left">
              <el-button
                type="primary"
                size="mini"
                plain
                @click="addPermission(row.id)"
              >添加权限</el-button>
            </template>
          </table-action>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
import { permissionTree, deletePermission } from "@/api";
import addPage from "./components/add";
import editPage from "./components/edit";
import editVue from "./components/edit.vue";
import tableAction from "@/components/table/action";

export default {
  components: { addPage, editPage, tableAction },
  data() {
    return {
      loading: true,
      data: [],
      deletePorps: {
        message: "该操作将删除权限及其子权限，确定删除"
      },
      treeProps: {
        children: "children"
      },
      addModal: {
        component: addPage,
        title: "添加权限",
        data: {
          id: 0
        },
        close: this.search
      },
      editModal: {
        component: editPage,
        title: "编辑权限",
        data: {
          id: 0
        },
        close: this.search
      }
    };
  },
  created() {
    this.search();
  },
  methods: {
    search() {
      permissionTree(
        res => {
          this.loading = false;
          this.data = res.data.tree;
        },
        err => {
          this.loading = false;
        }
      );
    },
    addPermission(id) {
      this.addModal.data.id = id;
      this.$uDialog(this.addModal);
    },
    editPermission(row) {
      this.editModal.data.id = row.id;
      this.$uDialog(this.editModal);
    },
    deleteIt(id) {
      deletePermission(
        id,
        res => {
          this.search();
        },
        () => {
          this.search();
        }
      );
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
